/*
 * @Author: hwd
 * @Description:
 * @FilePath: \my-react-crm\src\views\auth\user\index.js
 */
import { Space, Spin, Table, Button, Popconfirm } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { message } from "antd";

import Edit from "./components/edit";
import api_dic from "@/api/system/option";

const App = () => {
    const [loading, setLoading] = useState(false);
    const [ifShowEdit, setifShowEdit] = useState(false);
    const [list, setlist] = useState([]);
    const [_id, set_id] = useState("");
    const history = useHistory();

    useEffect(() => {
        setLoading(true);
        getList();
    }, []);

    //确认删除
    const deleteConfirm = async (e, record) => {
        const res = await api_dic.remove({ _id: record._id, operateType: "root" });
        message.success(res.msg);
        getList();
    };
    //列表加载
    const getList = async () => {
        setLoading(true);
        api_dic
            .getoption()
            .then((res) => {
                setLoading(false);
                setlist(res.data);
            })
            .catch(() => {
                setLoading(false);
            });
    };
    //打开编辑
    const edit = (_id = -1) => {
        set_id(_id);
        setifShowEdit(true);
    };
    //打开子项
    const navChild = (_id) => {
        history.push({ pathname: `/system/option/${_id}` });
    };
    const columns = [
        { title: "名称", dataIndex: "name", key: "name", align: "center" },
        { title: "类型", dataIndex: "type", key: "type", align: "center" },
        { title: "备注", dataIndex: "remark", key: "remark", align: "center" },
        { title: "创建时间", dataIndex: "createTime", key: "createTime", align: "center" },
        { title: "修改时间", dataIndex: "updateTime", key: "updateTime", align: "center" },
        {
            title: "操作",
            width: 100,
            key: "action",
            align: "center",
            render: (_, record) => (
                <Space size="middle">
                    <Button type="link" onClick={() => edit(record._id)}>
                        编辑
                    </Button>
                    <Button type="link" onClick={() => navChild(record._id)}>
                        查看子项
                    </Button>
                    <Popconfirm title="你确定要删除吗？" onConfirm={(e) => deleteConfirm(e, record)} okText="确定" cancelText="取消">
                        <Button type="link">删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    return (
        <>
            <Button
                type="primary"
                onClick={() => {
                    edit();
                }}
                style={{ marginBottom: "10px" }}>
                <PlusOutlined />
                添加字典
            </Button>
            <>
                {ifShowEdit ? (
                    <Edit
                        close={() => {
                            setifShowEdit(false);
                        }}
                        callback={getList}
                        _id={_id}
                        ifShowEdit={ifShowEdit}></Edit>
                ) : null}
            </>
            <Spin spinning={loading} delay={200}>
                <Table columns={columns} dataSource={list} rowKey={(record) => record._id} />
            </Spin>
        </>
    );
};

export default App;
